import 'package:flutter/material.dart';

//一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget
class ContainerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Container"),
        leading: new BackButton(),
      ),
      body: new ContainerContent(),
    );
  }
}

class ContainerContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        margin: const EdgeInsets.all(10),
        //一个小部件，它以多个水平或垂直运行显示其子项，默认方向为横向
        child: new Wrap(
          children: <Widget>[
            new Padding(
              padding: new EdgeInsets.all(8),
              child: const Card(
                child: const Text('Padding'),
                elevation: 2,
              ),
            ),

            //当alignment设置为Alignment.center时，Align就是Center
//                child: new Center(
            new Align(
              alignment: Alignment.center,
              //widthFactor：宽度因子，如果设置的话，Align的宽度就是child的宽度乘以这个值，不能为负数。
              widthFactor: 2,
              //高度因子，如果设置的话，Align的高度就是child的高度乘以这个值，不能为负数。
              heightFactor: 2,
              child: const Card(
                child: const Text('Align'),
                elevation: 2,
              ),
            ),

            new Container(
              //添加到child上额外的约束条件
              constraints: new BoxConstraints.expand(
                height:
                    //高为字体高度*1.1+200
                    Theme.of(context).textTheme.headlineMedium!.fontSize! * 1.1 + 200,
              ),
              //color:  Colors.grey,
              //设置了decoration的话，就不能设置color属性，否则会报错
              decoration: new BoxDecoration(
                //边框为红色，宽度为2
                border: new Border.all(width: 2.0, color: Colors.red),
                //背景色为灰色
                color: Colors.grey,
                //边角
                borderRadius:
                    //设置矩形右边两个角为圆角
//                    new BorderRadius.horizontal(right: new Radius.circular(20)),
                    //设置矩形上边两个角为圆角
//                    new BorderRadius.vertical(top: new Radius.circular(20)),
                    // 设置矩形四个角为圆角
//                    new BorderRadius.all(new Radius.circular(10,30)),
                    new BorderRadius.circular(20),
                //设置矩形四个角为椭圆角
//                    new BorderRadius.all(new Radius.elliptical(10, 30)),
                image: new DecorationImage(
                    image: new NetworkImage(
                        'http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
                    //当图片需要被拉伸显示的时候，centerSlice定义的矩形区域会被拉伸，可以理解成我们在图片内部定义来一个点9文件用作拉伸。
                    centerSlice:
                        new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0)),
              ),
              padding: const EdgeInsets.all(8),
              //控制child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用
              alignment: Alignment.center,
              child: new Text(
                'Hello World',
                style: Theme.of(context)
                    .textTheme
                    .headlineMedium!
                    .copyWith(color: Colors.black),
              ),
              //设置container的变换矩阵，类型为Matrix4
              transform: new Matrix4.rotationZ(0.3),
            ),
            new Container(
              margin: const EdgeInsets.only(top: 100),
              child: new ZJWRoundButton(
                title: new Text(
                  "I am a default button",
                  style: new TextStyle(fontSize: 18.0, color: Colors.white),
                ),
                disabled: false,
                onPress: () {
                  //可能错误：Scaffold.of() called with a context that does not contain a Scaffold.
                  // 这个context的父布局没有Scaffold,直接用的页面级的context
                  final snackBar = new SnackBar(content: new Text('Click One!!'));
                  // Scaffold.of(context).showSnackBar(snackBar);
                  ScaffoldMessenger.of(context).showSnackBar(snackBar);
                },
              ),
            ),
            new Container(
              margin: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
              child: new ZJWRoundButton(
                width: 250,
                height: 80,
                backgroundColor: const Color(0xFF41CB39),
                activeBackgroundColor: const Color(0xB341CB39),
                disabledBackgroundColor: const Color(0x3341CB39),
                title: new Text(
                  'I am a custom button',
                  style: new TextStyle(fontSize: 18, color: Colors.white),
                ),
                disabled: false,
                onPress: () {
                  final snackBar =
                      new SnackBar(content: new Text('Click Two!!'));
                  // Scaffold.of(context).showSnackBar(snackBar);
                  ScaffoldMessenger.of(context).showSnackBar(snackBar);
                },
              ),
            ),
            new ZJWRoundButton(
              title: new Text(
                'I`m a disabled button',
                style: new TextStyle(fontSize: 18, color: Colors.white),
              ),
              disabled: true,
              onPress: () {
                final snackBar =
                    new SnackBar(content: new Text('Click Three!!'));
                // Scaffold.of(context).showSnackBar(snackBar);
                ScaffoldMessenger.of(context).showSnackBar(snackBar);
              },
            )
          ],
        ));
  }
}

class ZJWRoundButton extends StatefulWidget {
  static const defaultBackgroundColor = const Color(0xFF8B5FFE);
  static const defaultActiveBackgroundColor = const Color(0xB38B5FFE);
  static const defaultDisabledBackgroundColor = const Color(0x338B5FFE);

  ZJWRoundButton({
    this.title,
    this.onPress,
    this.height = 52,
    //填充满父布局
    this.width = double.infinity,
    this.disabled = false,
    this.backgroundColor = defaultActiveBackgroundColor,
    this.activeBackgroundColor = defaultActiveBackgroundColor,
    this.disabledBackgroundColor = defaultDisabledBackgroundColor,
  });

  final Widget? title;
  final Color backgroundColor, activeBackgroundColor, disabledBackgroundColor;
  final VoidCallback? onPress;
  final double height, width;
  final bool disabled;

  @override
  State<StatefulWidget> createState() => new _ZJWRoundButtonState();
}

class _ZJWRoundButtonState extends State<ZJWRoundButton> {
  late Color currentColor;

  @override
  void initState() {
    super.initState();
    if (widget.disabled) {
      currentColor = widget.disabledBackgroundColor;
    } else {
      currentColor = widget.backgroundColor;
    }
  }

  @override
  void deactivate() {
    super.deactivate();
    //在控件的deactivate状态，我们需要将控件的属性初始到最开始的状态
    currentColor = widget.backgroundColor;
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: () {
        if (widget.onPress != null && !widget.disabled) {
          widget.onPress!();
        }
      },
      onTapDown: (TapDownDetails details) {
        if (!widget.disabled) {
          setState(() {
            currentColor = widget.activeBackgroundColor;
          });
        }
      },
      onTapUp: (TapUpDetails details) {
        if (!widget.disabled) {
          setState(() {
            currentColor = widget.backgroundColor;
          });
        }
      },
      onTapCancel: () {
        if (!widget.disabled) {
          setState(() {
            currentColor = widget.backgroundColor;
          });
        }
      },
      child: new Container(
        decoration: new BoxDecoration(
          color: currentColor,
          borderRadius:
              new BorderRadius.all(new Radius.circular(widget.height / 2)),
        ),
        height: widget.height,
        width: widget.width,
        alignment: Alignment.center,
        child: widget.title,
      ),
    );
  }
}
